<!--
 * @Author: asushiye
 * @Date: 2020-07-02 15:30:23
 * @Commit: file content
-->
<page-header autoTitle="false" />

<nz-card>
  <form nz-form nzLayout="inline" se-container>
    <se label="指标名" labelWidth="0">
      <input nz-input name="indiName" placeholder="请输入指标名" [(ngModel)]="queryParams.indiName" />
    </se>
    <se label="指标实例名" labelWidth="0">
      <input nz-input name="indiAlias" placeholder="请输入指标实例名" [(ngModel)]="queryParams.indiAlias" />
    </se>
    <se>
      <button nz-button nzType="primary" (click)="query()" [nzLoading]="isLoading">查询</button>
      <button nz-button [nzType]="'default'" (click)="add()">
        <i nz-icon nzType="plus-circle"></i>
        <span>新建</span>
      </button>
      <button nz-button nzType="default" (click)="importData()" [nzLoading]="isLoading">
        <span>导入</span>
        <i nz-icon nzType="import"></i>
      </button>
      <button nz-button nzType="default" (click)="exportData()" [nzLoading]="isExporting">
        <span>导出</span>
        <i nz-icon nzType="export"></i>
      </button>
      <button nz-button [nzType]="'default'" (click)="downloadTemplate()">
        <span>下载模板</span>
        <i nz-icon nzType="download"></i>
      </button>

      <button nz-button nz-dropdown [nzDropdownMenu]="menu" [nzLoading]="isLogExporting">
        历史日志
        <i nz-icon nzType="down"></i>
      </button>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item>
            <a (click)="exportLog()"> 下载当前日志 </a>
          </li>
          <li nz-menu-item>
            <a (click)="navUploadLogView()">历史上传记录 </a>
          </li>
        </ul>
      </nz-dropdown-menu>
    </se>
  </form>
  <st #st [data]="url" [req]="req" [columns]="columns" [expand]="expand" [ps]="200" size="small" expandRowByClick expandAccordion>
    <ng-template #expand let-item let-index="index" let-column="column">
      <sv-container size="small" col="4">
        <sv-title>更多内容</sv-title>
        <sv label="指标类型" type="warning">{{ item!.indiType }}</sv>
        <sv label="描述" type="success" col="3">{{ item!.indiDesc }}</sv>
        <sv label="负责人">{{ item!.responsiblePerson }}</sv>
        <sv label="计算周期">{{ item!.calculationPeriod }}</sv>
        <sv label="标签">{{ item!.tags }}</sv>
        <sv label="启用">{{ item!.enabled }}</sv>
        <sv label="创建人">{{ item!.createdBy }}</sv>
        <sv label="创建时间">{{ item!.createdDate }}</sv>
        <sv label="更新人">{{ item!.lastModifiedBy }}</sv>
        <sv label="更新日期">{{ item!.lastModifiedDate }}</sv>
      </sv-container>
    </ng-template>
  </st>
</nz-card>

<nz-drawer
  [nzSize]="drawerOption.size"
  [nzVisible]="drawerOption.visible"
  [nzTitle]="drawerOption.title"
  nzPlacement="right"
  [nzFooter]="drawerTemplate"
  (nzOnClose)="closeDrawer()"
>
  <ng-container *nzDrawerContent>
    <form nz-form [nzAutoTips]="autoTips" [formGroup]="tForm">
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="indiName" nzRequired>指标名称</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your indiName">
          <input formControlName="indiName" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="indiAlias" nzRequired>指标实例名</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your indiAlias">
          <input formControlName="indiAlias" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="indiType" nzRequired>指标类型</nz-form-label>
        <nz-form-control [nzSm]="8" [nzXs]="24" nzErrorTip="Please input your indiType">
          <nz-select formControlName="indiType" name="indiType" nzPlaceHolder="" nzAllowClear>
            <nz-option [nzLabel]="'原子指标'" [nzValue]="'原子指标'" />
            <nz-option [nzLabel]="'计算指标'" [nzValue]="'计算指标'" />
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="calculationLogic" nzRequired>计算逻辑</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your calculationLogic">
          <textarea formControlName="calculationLogic" nz-input placeholder=""></textarea>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="statisticalScope" nzRequired>统计范围</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your statisticalScope">
          <textarea formControlName="statisticalScope" nz-input placeholder=""></textarea>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="statisticTime" nzRequired>统计时间</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your statisticTime">
          <textarea formControlName="statisticTime" nz-input placeholder=""></textarea>
        </nz-form-control>
      </nz-form-item>

      <!-- <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="parentIds" nzRequired>父指标ids</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your parentIds">
          <textarea formControlName="parentIds" nz-input placeholder="" ></textarea>
        </nz-form-control>
      </nz-form-item> -->

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="calculationPeriod">计算周期</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your calculationPeriod">
          <input formControlName="calculationPeriod" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="responsiblePerson">负责人</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your responsiblePerson">
          <input formControlName="responsiblePerson" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="enabled">启用</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your enabled">
          <nz-select formControlName="enabled" style="width: 100px" nzPlaceHolder="选择" nzAllowClear>
            <nz-option nzLabel="启用" [nzValue]="1" />
            <nz-option nzLabel="禁用" [nzValue]="0" />
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="tags">标签</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24" nzErrorTip="Please input your tags">
          <input formControlName="tags" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-drawer>

<ng-template #drawerTemplate>
  <button nz-button nzType="primary" (click)="save()" [nzLoading]="isLoading" [disabled]="tForm.invalid">
    <i nz-icon nzType="save"></i> 保存</button
  >
  <button style="float: right" nz-button nzType="default" (click)="closeDrawer()">关闭</button>
</ng-template>

<nz-drawer
  [nzWidth]="drawerHistoryOption.width"
  [nzSize]="drawerHistoryOption.size"
  [nzVisible]="drawerHistoryOption.visible"
  [nzTitle]="drawerHistoryOption.title"
  nzPlacement="right"
  [nzFooter]="drawerHistoryTemplate"
  (nzOnClose)="closeHistoryDrawer()"
>
  <ng-container *nzDrawerContent>
    <st #sth [data]="historyRows" [columns]="columnsHisotry" [expand]="expand" [ps]="50" size="small" expandRowByClick expandAccordion>
      <ng-template #expand let-item let-index="index" let-column="column">
        <sv-container size="small" col="4">
          <sv-title>更多内容</sv-title>
          <sv label="指标类型" type="warning">{{ item!.indiType }}</sv>
          <sv label="描述" type="success" col="3">{{ item!.indiDesc }}</sv>
          <sv label="负责人">{{ item!.responsiblePerson }}</sv>
          <sv label="计算周期">{{ item!.calculationPeriod }}</sv>
          <sv label="标签">{{ item!.tags }}</sv>
          <sv label="启用">{{ item!.enabled }}</sv>
          <sv label="创建人">{{ item!.createdBy }}</sv>
          <sv label="创建时间">{{ item!.createdDate }}</sv>
        </sv-container>
      </ng-template>
    </st>
  </ng-container>
</nz-drawer>

<ng-template #drawerHistoryTemplate>
  <button style="float: right" nz-button nzType="default" (click)="closeHistoryDrawer()">关闭</button>
</ng-template>
